import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
import { useState } from 'react';
import { View, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro';
import './order_msg.scss';

// wyc
const go = () => {
  Taro.navigateTo({
    url: '/pages/Group/group_xiangqing/groupXiangqing'
  })
}

const Order_msg = () => {
  const [tit, setTit] = useState('未提货 | 请扫描顾客提货二维码确认提货');
  const [style, setStyle] = useState('footer');

  const change = () => {
    setTit('已提货');
    setStyle('footer2')
  }
  const [isOpened, SetMaodl] = useState(false)
  const close = () => {
    SetMaodl(false)
  }
  const open = () => {
    SetMaodl(true)
  }
  return (
    <View className='index'>
      <View className='header'>
        <View onClick={open}>
          <View>社区名称</View>
          <Text>提货点：鲜丰水果</Text>
          <Text>电话：088-66666666</Text>
        </View>
        <View>订单编号：SQDS000000212</View>
      </View>
      <View className='mod_style'>
        <View>提货人预留信息</View>
        <View className='man_msg'>
          <View>李浩</View>
          <View>18555555</View>
        </View>
      </View>
      <View className='mod_style' onClick={go}>
        <View>拼团信息</View>
        <View className='order_msg'>
          <View className='order_img'></View>
          <View>
            <View>精品泰国桂圆 1000g/盒</View>
            <View>
              <View>
                <Text>￥7.8</Text>
                <Text>￥14.6</Text>
              </View>
              <View>
                <Text>每人限购1份</Text>
                <Text>x1</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
      <View className='mod_style'>
        <View>拼团成员 <Text>4团</Text> </View>
        <View className='team_msg'>
          <View>
            <View className='team_img'></View>
            <View className='team_name'>Lee（李浩）</View>
          </View>
          <View className='team_num'>团了1份</View>
        </View>        <View className='team_msg'>
          <View>
            <View className='team_img'></View>
            <View className='team_name'>Sober</View>
          </View>
          <View className='team_num'>团了2份</View>
        </View>        <View className='team_msg'>
          <View>
            <View className='team_img'></View>
            <View className='team_name'>Tom</View>
          </View>
          <View className='team_num'>团了3份</View>
        </View>
      </View>
      <View className='blank'></View>
      <View className={style} onClick={change}>{tit}</View>
      <AtModal isOpened={isOpened} closeOnClickOverlay={false}>
        <AtModalHeader>拼单点详情</AtModalHeader>
        <AtModalContent>
          <View>团长：陈咬金</View>
          <View>电话：1855555555</View>
          <View>地点：社区名称</View>
          <View>地址：北京市XXXXXXXXXXXX</View>
        </AtModalContent>
        <AtModalAction> <Button onClick={close}>关闭</Button> </AtModalAction>
      </AtModal>
    </View>
  )
}

export default Order_msg;